<template>
  <div class="right-chart-1">
    <div class="rc1-header">成果等级</div>

    <div class="rc1-chart-container">


      <dv-capsule-chart class="right" :config="config" />
    </div>
  </div>
</template>

<script>
  import { listUser } from "@/api/module/gs/user";

  export default {
  name: 'RightChart1',
  data () {
    return {
      config: {

      },
      userCount:0,
      studentNumber:0,
      qiyeNumber:0,
      gerenNumber:0,
    }
  },
    created() {
      this.getUserCount();
      this.getstudentUser();
      this.getqiyeUser();
      this.getgerenUser();
      this.$watch(
        () => [this.studentNumber, this.qiyeNumber, this.gerenNumber],
        () => {
          this.createData();
        }
      );
    },
    methods: {
      /** 查询成果总数 */
      getUserCount() {
       this.loading = true;
        listUser().then(response => {
          console.log(response.rows.length+"response.rows.length;")
          this.userCount = response.rows.length;
        });
      },
      getstudentUser() {
        this.loading = true;
        const queryParams = { roleId: "11" };
        listUser(queryParams).then(response => {
          console.log(response.rows.length+"response.rows.length;")
          this.studentNumber = response.rows.length;
        });
      },
      getqiyeUser() {
        this.loading = true;
        const queryParams = { roleId: "13" };
        listUser(queryParams).then(response => {
          console.log(response.rows.length+"response.rows.length;")
          this.qiyeNumber = response.rows.length;
        });
      },
      getgerenUser() {
        this.loading = true;
        const queryParams = { roleId: "14" };
        listUser(queryParams).then(response => {
          console.log(response.rows.length+"response.rows.length;")
          this.gerenNumber = response.rows.length;
        });
      },
      createData () {
        const { randomExtend } = this

        this.config = {
          data: [
            {
              name: '国家级',
              value: this.studentNumber
            },
            {
              name: '省级',
              value: this.qiyeNumber
            },
            {
              name: '校级',
              value: this.gerenNumber
            },
            {
              name: '院级',
              value: this.gerenNumber
            },
          ],
          unit: '个'
        }
      },

    }
}
</script>

<style lang="less">
.right-chart-1 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .rc1-header {
    font-size: 24px;

    height: 30px;
    line-height: 30px;
  }

  .rc1-chart-container {
    flex: 1;
    display: flex;
  }

  .left {
    width: 30%;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .number {
      font-size: 34px;
      color: #096dd9;
      font-weight: bold;
      margin-bottom: 30px;
    }
  }

  .right {
    flex: 1;
    padding-bottom: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }
}
</style>
